<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        img{
            width: 100px;
            height: 100px;
        }


    </style>
</head>
<body>
    <div id="box">
      <!-- 任何属性都可以加上 : 加上之后就相当于js了!!! -->

      <!-- 此处不能使用@click,太早了,还没来得及变化 -->
      全选<input type="checkbox" @change="changeCheck" v-model="isAll">
      <ul>
        <!-- of 或者是 in 不是for 写错过 -->
        <li v-for="(item,index) of goosList" :key="item.id">
          <input type="checkbox" v-model="list" :value="item" @change="isAllCheck">
            {{item.name}}
          <img src="../imgs/admin监控.png" alt="">
        数量:
          {{item.count}}  价格{{item.price}}    单价总价{{item.count*item.price}}  

          <button @click="item.count--" :disabled="item.count==1">-</button>{{item.count}}<button @click="item.count++" :disabled="item.count==item.limit">+</button>
        
          <button @click="deleteLi(index,item.id)">删除</button>
        </li>
        总金额{{getAllPrice()}}
        {{list}}
      </ul>
    </div>
    
    <script>
        let obj = {
           data(){
            return{
              isAll:false,
                list:[],
                goosList:[
                 {
                    id:1,
                    name:'果冻',
                    count:1,
                    price:12,
                    limit:5
                 },
                 {
                    id:2,
                    name:'大米',
                    count:4,
                    price:32,  limit:7
                 },
                 {
                    id:3,
                    name:'米粉',
                    count:2,
                    price:23,
                    limit:7
                 }
            ],
                }
           },
           methods: {
              getAllPrice(){
                // 得到所有商品集合的价格树
                let num = 0
                this.list.forEach(element => {
                  num+=element.count*element.price
                });
                return num
              },
              deleteLi(index,id){
                this.goosList.splice(index,1)
                // 删除商品勾选之后的集合,使用过滤
                // return this.dataArr.filter(intem=>intem.includes(this.myValue))
              let newList= this.list.filter(item=>item.id!=id)
              this.list = newList
              },
              // 全选
              changeCheck(){
                if(this.isAll){
                  this.list = this.goosList;
                }else{
                  this.list = []
                }
              },
              isAllCheck(){
                // 少选一个那么多选就会取消
                if(this.list.length ===this.goosList.length){
                  this.isAll = true
                }else{
                  this.isAll = false
                }
              }
           }
          }
      
           
       
      Vue.createApp(obj).mount('#box')
    
    </script>
</body>
</html>